<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/react@17/umd/react.development.js"
            crossorigin></script>
        <script
            src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
            crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <title>非受控组件</title>
    </head>
    <body>
        <div id="root"></div>

        <script type="text/babel">
            class Login extends React.Component{ //没有状态，没有数据源
             

                handleSubmit=(e)=>{
                    e.preventDefault()//阻止默认行为，表单的提交
                    const {username,password}=this
                    console.log(username.value,password.value);
                    alert(`用户名:${username.value}\n\n密码:${password.value}`)
                }

                render(){
                    return(
                        <form action="" onSubmit={this.handleSubmit}>
                            用户名：<input  ref={c=>this.username=c} type="text" name="name" /><br/>    
                            密  码：<input  ref={c=>this.password=c} type="text" name="passw" /><br/>
                            <button>login in</button>
                        </form>
                    )
                }
            }
			ReactDOM.render( < Login / > , document.getElementById('root'));
		</script>
    </body>
</html>
